<template>
  <div class="cs-page-container">
    <el-card class="box-card">
      <div
        slot="header"
        class="clearfix"
      >
        <span>基本信息</span>
      </div>
      <table class="cs-detail-info">
        <tr>
          <td>ID：{{ detail.id }}</td>
          <td>性别：{{ detail.gender | gender }}</td>
          <td>昵称：{{ detail.nickname }}</td>
        </tr>
        <tr>
          <td>创建设备：{{ detail.createMachine }}</td>
          <td>创建时间：{{ detail.createTime }}</td>
          <td>渠道：{{ detail.channelName }}</td>
        </tr>
        <tr>
          <td>IP：{{ detail.ipAddress }}</td>
          <td>手机号：{{ detail.phone }}</td>
          <td>最后登录时间：{{ detail.loginLastTime }}</td>
        </tr>
        <tr>
          <td>钻石数量：{{ detail.diamonds }}</td>
          <td>积分数量：{{ detail.coins / 100 }}</td>
          <td>试聊卡数量：{{ detail.chatCards }}</td>
        </tr>
        <tr>
          <td>师傅ID：{{ detail.masterId }}</td>
          <td>贡献分成：{{ detail.divideCoins }}</td>
          <td>徒弟数量：{{ detail.disciples }}</td>
        </tr>
      </table>
    </el-card>
    <el-card
      class="box-card"
      style="margin-top: 10px;"
    >
      <div
        slot="header"
        class="clearfix"
      >
        <span>礼物统计</span>
      </div>
      <el-table
        :data="detail.giftVoList"
        border
        fit
        size="small"
      >
        <el-table-column
          align="center"
          label="礼物名称"
          prop="name"
        />
        <el-table-column
          align="center"
          label="礼物数量"
          prop="num"
        />
        <el-table-column
          align="center"
          label="礼物价格"
          prop="price"
        />
      </el-table>
    </el-card>
    <el-card
      class="box-card"
      style="margin-top: 10px;"
    >
      <div
        slot="header"
        class="clearfix"
      >
        <span>消耗统计</span>
      </div>
      <table class="cs-detail-info">
        <tr v-if="detail.consumptionStatistics">
          <td>
            钻石累计消耗：{{ detail.consumptionStatistics.sumDiamondsTotal }}
          </td>
          <td>
            聊天钻石累计消耗：{{ detail.consumptionStatistics.sumChatDiamonds }}
          </td>
          <td>
            送礼消耗：{{ detail.consumptionStatistics.sumSendGiftDiamonds }}
          </td>
          <td>
            查看私照消耗：{{
              detail.consumptionStatistics.sumViewPhotoDiamonds
            }}
          </td>
        </tr>
        <tr v-else>
          <td>暂无数据</td>
        </tr>
      </table>
    </el-card>
    <el-card
      class="box-card"
      style="margin-top: 10px;"
    >
      <div
        slot="header"
        class="clearfix"
      >
        <span>收益统计</span>
      </div>
      <table class="cs-detail-info">
        <tr v-if="detail.gitStatistics">
          <td>累计获得积分：{{ detail.gitStatistics.sumCoinsTotal / 100 }}</td>
          <td>聊天积分：{{ detail.gitStatistics.sumChatCoins / 100 }}</td>
          <td>收礼积分：{{ detail.gitStatistics.sumSendGiftCoins / 100 }}</td>
          <td>查看私照积分：{{ detail.gitStatistics.sumViewPhotoCoins / 100 }}</td>
          <td>收徒奖励积分：{{ detail.gitStatistics.sumEnlighteningReward / 100 }}</td>
          <td>徒弟分成积分：{{ detail.gitStatistics.sumEnlighteningDivide / 100 }}</td>
        </tr>
        <tr v-else>
          <td>暂无数据</td>
        </tr>
      </table>
      <el-divider />
      <p>
        <span>提现次数：{{ detail.withdrawalCounts }}</span>
        <span>提现金额：{{ detail.withdrawalMoney / 100 }}元</span>
      </p>
    </el-card>
    <el-card
      class="box-card"
      style="margin-top: 10px;"
    >
      <div
        slot="header"
        class="clearfix"
      >
        <span>聊天统计</span>
      </div>
      <table class="cs-detail-info">
        <tr v-if="detail.chatStatistics">
          <td>语音聊天总时长：{{ detail.chatStatistics.sumVioceTime }}分钟</td>
          <td>语音聊天总时长：{{ detail.chatStatistics.sumVioceTime }}分钟</td>
          <td>视频聊天总时长：{{ detail.chatStatistics.sumVideoTime }}分钟</td>
          <td>求聊/抢聊次数：{{ detail.chatStatistics.sumChatCount }}</td>
        </tr>
        <tr v-else>
          <td>暂无数据</td>
        </tr>
      </table>
    </el-card>
  </div>
</template>

<script>
import {
  xhrAccountDetail
} from '@api/account';
export default {
  data() {
    const query = this.$route.query;
    return {
      userId: query.id ? query.id : null,
      detail: {}
    };
  },
  created() {
    xhrAccountDetail({
        userId: this.userId
      })
      .then((resp) => {
        this.detail = resp.data;
      })
      .catch((err) => {
        this.$message.error(err);
      });
  },
  methods: {}
};
</script>

<style lang="scss">
.cs-detail-info {
  td {
    padding: 10px 20px 0 0;
    font-size: 14px;
  }
}
</style>
